<template>
  <div class="dish-detail-container">
    <div class="detail-content" v-loading="loading">
      <div v-if="dish" class="dish-info">
        <div class="dish-header">
          <el-button icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
          <h1 class="dish-title">{{ dish.dishname }}</h1>
        </div>
        
        <el-row :gutter="40">
          <el-col :span="12">
            <div class="dish-image">
              <img :src="dish.dishcover || require('@/assets/dishes/dish1.jpg')" :alt="dish.dishname">
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="dish-details">
              <h2 class="dish-name">{{ dish.dishname }}</h2>
              <div class="dish-price">¥{{ dish.dishprice }}</div>
              <div class="dish-description">
                <h3>菜品描述</h3>
                <p>{{ dish.dishdescription || '暂无描述' }}</p>
              </div>
              
              <div class="dish-actions">
                <el-button 
                  type="primary" 
                  size="large" 
                  @click="addToCart"
                  :disabled="!isLoggedIn"
                  icon="el-icon-shopping-cart-2"
                >
                  {{ isLoggedIn ? '加入购物车' : '请先登录' }}
                </el-button>
                
                <el-button 
                  type="success" 
                  size="large" 
                  @click="buyNow"
                  :disabled="!isLoggedIn"
                  icon="el-icon-shopping-bag-1"
                >
                  {{ isLoggedIn ? '立即购买' : '请先登录' }}
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      
      <div v-else-if="!loading" class="empty-state">
        <i class="el-icon-dish empty-icon"></i>
        <p class="empty-text">菜品不存在</p>
        <el-button type="primary" @click="$router.push('/dish/list')">返回菜品列表</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDishDetail } from '@/api/dish'
import { addToCart } from '@/api/cart'

export default {
  name: 'DishDetail',
  data() {
    return {
      loading: false,
      dish: null
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'userInfo'])
  },
  mounted() {
    this.loadDishDetail()
  },
  methods: {
    async loadDishDetail() {
      const dishId = this.$route.query.dishId
      if (!dishId) {
        this.$message.error('菜品ID不存在')
        this.$router.push('/dish/list')
        return
      }

      this.loading = true
      try {
        const response = await getDishDetail(dishId)
        if (response.data && response.data.code === 20000) {
          this.dish = response.data.data
        } else {
          this.$message.error('加载菜品详情失败')
        }
      } catch (error) {
        console.error('加载菜品详情失败:', error)
        this.$message.error('加载菜品详情失败')
      } finally {
        this.loading = false
      }
    },

    async addToCart() {
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }

      try {
        const response = await addToCart(this.dish.dishname, this.dish.dishprice, this.userInfo.userid)
        if (response.data && response.data.code === 20000) {
          this.$message.success('已添加到购物车')
        } else {
          this.$message.error(response.data?.msg || '添加失败')
        }
      } catch (error) {
        console.error('添加到购物车失败:', error)
        this.$message.error('添加到购物车失败')
      }
    },

    buyNow() {
      if (!this.isLoggedIn) {
        this.$message.warning('请先登录')
        this.$router.push('/login')
        return
      }

      // 先添加到购物车，然后跳转到支付页面
      this.addToCart().then(() => {
        this.$router.push('/payment')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dish-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .detail-content {
    .dish-info {
      .dish-header {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        
        .dish-title {
          margin-left: 20px;
          font-size: 28px;
          color: #333;
        }
      }

      .dish-image {
        img {
          width: 100%;
          height: 400px;
          object-fit: cover;
          border-radius: 8px;
        }
      }

      .dish-details {
        padding: 20px;

        .dish-name {
          font-size: 24px;
          color: #333;
          margin-bottom: 15px;
        }

        .dish-price {
          font-size: 32px;
          color: #e74c3c;
          font-weight: bold;
          margin-bottom: 30px;
        }

        .dish-description {
          margin-bottom: 40px;

          h3 {
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
          }

          p {
            color: #666;
            line-height: 1.6;
          }
        }

        .dish-actions {
          display: flex;
          gap: 15px;

          .el-button {
            flex: 1;
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      
      .empty-icon {
        font-size: 64px;
        color: #ddd;
        margin-bottom: 20px;
      }
      
      .empty-text {
        font-size: 18px;
        color: #666;
        margin-bottom: 20px;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dish-detail-container {
    padding: 10px;
    
    .dish-header {
      .dish-title {
        font-size: 20px !important;
      }
    }
    
    .dish-details {
      padding: 10px !important;
      
      .dish-name {
        font-size: 20px !important;
      }
      
      .dish-price {
        font-size: 24px !important;
      }
      
      .dish-actions {
        flex-direction: column;
      }
    }
  }
}
</style> 